<template>
  <!--车辆数据展示-->
  <div class="contentRight" style="background-color: #f0f2f5;">
    <div class="zhezhaoContentRight" v-if="loadingAllPosition">
      <a-spin tip="加载中..." style="position: fixed;top: 50%;">
      </a-spin>
    </div>
    <!--<div class="zhezhaoContentRight" v-if="allMessageNull != ''">-->
      <!--<div style="position: fixed;top: 50%;">-->
        <!--{{allMessageNull}}-->
      <!--</div>-->
    <!--</div>-->

    <!--老写法-->
    <!--<a-row :gutter="[10,10]" style="margin: 0 !important;">-->
      <!--<a-col class="gutter-row" :span="12">-->
        <!--<div class="gutter-box whiteColor">-->
          <!--<a-card size="small"  title="安亭基地" :bordered="false" :bodyStyle="{height:'350px',maxHeight:'350px'}">-->
            <!--<div :style="{height: '100%',overflow: 'hidden auto'}">-->
              <!--<div v-if="antingcarsData.length !=0">-->

                <!--<div style="border: 1px solid #3f8600;margin-bottom: 10px" v-for="(item,index) in antingcarsData" :key="index">-->
                  <!--<a-row :gutter="10" type="flex" justify="space-around">-->
                    <!--<a-col :span="8">-->
                      <!--<div class="flex3">-->
                        <!--<span style="font-size: 14px;">{{item.bdStation}}</span>-->
                      <!--</div>-->
                    <!--</a-col>-->
                    <!--<a-col :span="8">-->
                      <!--<a-card size="small" :bordered="false" >-->
                        <!--<div class="flex">-->
                          <!--<img class="carIconImg2" src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/carsOn.png"/>-->
                          <!--<a-statistic-->
                            <!--title="剩余车位"-->
                            <!--:value="item.surplusCarport"-->
                            <!--:value-style="valueGreen"-->
                          <!--&gt;-->
                          <!--</a-statistic>-->
                        <!--</div>-->
                      <!--</a-card>-->
                    <!--</a-col>-->
                    <!--<a-col :span="8">-->
                      <!--<a-card size="small" :bordered="false" >-->
                        <!--<div class="flex">-->
                          <!--<img class="carIconImg2" src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/carsOff.png"/>-->
                          <!--<a-statistic-->
                            <!--title="已停车位"-->
                            <!--:value="item.stopCarport"-->
                            <!--:value-style="valueRed"-->
                          <!--&gt;-->
                          <!--</a-statistic>-->
                        <!--</div>-->
                      <!--</a-card>-->
                    <!--</a-col>-->
                  <!--</a-row>-->
                <!--</div>-->
              <!--</div>-->

              <!--<div v-else style="width: 100%;height: 300px;text-align: center;line-height: 300px">-->
                <!--{{antingResultMsg}}-->
              <!--</div>-->
              <!--&lt;!&ndash;自定义加载中&ndash;&gt;-->
              <!--<div class="zhezhaoBase" v-if="loadingAnting">-->
                <!--<a-spin tip="加载中...">-->
                <!--</a-spin>-->
              <!--</div>-->
            <!--</div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->

      <!--<a-col class="gutter-row" :span="12">-->
        <!--<div class="gutter-box whiteColor">-->
          <!--<a-card size="small" title="银川基地" :bordered="false" :bodyStyle="{height:'350px',maxHeight:'350px'}">-->
            <!--<div style="width: 100%;height: 300px;text-align: center;line-height: 300px">-->
              <!--该区域暂未开通-->
            <!--</div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->
      <!--<a-col class="gutter-row" :span="12">-->
        <!--<div class="gutter-box whiteColor">-->
          <!--<a-card size="small" title="太仓基地" :bordered="false" :bodyStyle="{height:'350px',maxHeight:'350px'}">-->
            <!--<div style="width: 100%;height: 300px;text-align: center;line-height: 300px">-->
              <!--该区域暂未开通-->
            <!--</div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->
      <!--<a-col class="gutter-row" :span="12">-->
        <!--<div class="gutter-box whiteColor">-->
          <!--<a-card size="small" title="湘潭基地" :bordered="false" :bodyStyle="{height:'350px',maxHeight:'350px'}">-->
            <!--<div style="width: 100%;height: 300px;text-align: center;line-height: 300px">-->
              <!--该区域暂未开通-->
            <!--</div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->
    <!--</a-row>-->

    <!--循环展示-->
    <a-row :gutter="[10,10]" style="margin: 0 !important;padding-bottom: 10px;">
      <a-col class="gutter-row" :span="12" v-for="base in allPackData" :key="base.baseId">
        <div class="gutter-box whiteColor">
          <a-card size="small"  :title="base.baseName" :bordered="false" :bodyStyle="{height:'260px',maxHeight:'260px'}">
            <div :style="{height: '100%',overflow: 'hidden auto'}">
              <div v-if="base.packList.length !=0">

                <div :style="{'margin-bottom': index ==(base.packList.length-1)?'':'10px',border:'1px solid #3f8600'}" v-for="(item,index) in base.packList" :key="index">
                  <a-row :gutter="10" type="flex" justify="space-around">
                    <a-col :span="8">
                      <div class="flex3">
                        <span style="font-size: 14px;">{{item.bdStation}}</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <a-card size="small" :bordered="false" >
                        <div class="flex">
                          <img class="carIconImg2" src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/carsOn.png"/>
                          <a-statistic
                            title="剩余车位"
                            :value="item.surplusCarport"
                            :value-style="valueGreen"
                          >
                          </a-statistic>
                        </div>
                      </a-card>
                    </a-col>
                    <a-col :span="8">
                      <a-card size="small" :bordered="false" >
                        <div class="flex">
                          <img class="carIconImg2" src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/carsOff.png"/>
                          <a-statistic
                            title="已停车位"
                            :value="item.stopCarport"
                            :value-style="valueRed"
                          >
                          </a-statistic>
                        </div>
                      </a-card>
                    </a-col>
                  </a-row>
                </div>
              </div>

              <div v-else style="width: 100%;height: 220px;text-align: center;line-height: 220px">
                {{packListNo}}
              </div>
              <!--自定义加载中-->
              <div class="zhezhaoBase" v-if="loadingPackList">
                <a-spin tip="加载中...">
                </a-spin>
              </div>
            </div>
          </a-card>
        </div>
      </a-col>

    </a-row>
  </div>
</template>

<script>
import reservationApi from "@/api/reservation";

export default {
  components: {

  },
  name:'',
  data() {
    return {
      loadingAllPosition: true,
      allMessageNull: "", //总数据为空
      loading: false,
      aningAreaAll:[],
      antingChart: null,  //安亭数据图形对象
      antingAreaName:"办公区域",
      antingAreaId: "1",
      antingResultMsg: "",
      loadingAnting: true,
      antingcarsData: [],

      allStopCarport: 0 , //所有基地已停车辆
      allSurplusCarport: 0 , //所有基地剩余车辆

      intervalId:null,   //定时器，定时刷新页面
      antingData: [],
      valueGreen: { color: '#3f8600',fontSize: '20px',lineHeight: '20px' },
      valueRed: { color: '#cf1322',fontSize: '20px',lineHeight: '20px' },
      // 循环法
      allPackData:[],
      packListNo: "未查询到停车场",
      loadingPackList: true,
    }
  },
  beforeMount(){
    // for (let i = 1; i < 11; i++) {
    //   this.allPackData.push({
    //     baseId: i,
    //     baseName: `基地${i}`,
    //     packList: [
    //       {
    //         bdStation: "停车场1",
    //         stopCarport: "56",
    //         surplusCarport: "67"
    //       },
    //       {
    //         bdStation: "停车场2",
    //         stopCarport: "30",
    //         surplusCarport: "67"
    //       },
    //       {
    //         bdStation: "停车场3",
    //         stopCarport: "30",
    //         surplusCarport: "67"
    //       },
    //     ]
    //   })
    // }

  },
  created(){
    this.dataRefreh();
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  },
  mounted() {
    this.fristLoadingData();
  },
  methods: {
    // 获取安亭基地区域
    async getAntingAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
      // console.log(res.data);
      if (res.data.success){
        this.aningAreaAll = res.data.result;
      } else {
        this.$message.error(res.data.message);
      }

    },
    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        // console.log("刷新" + new Date());
        this.fristLoadingData();
      }, 20000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    // 加载所有基地数据
    fristLoadingData(){
      this.getAllCase();
      // this.pieChart1()
    },
    // 安亭基地切换区域--不用
    async handleClick(e) {
      // console.log(e)
      this.antingAreaName = e.item.value;
      this.antingAreaId = e.key;
      await this.getAllCase();
      // this.antingChart.data(this.antingData);
      // this.antingChart.render();
    },
    // 定时加载安亭数据--不用
    async loadAntingDataRegularly() {
      await this.getAllCase();
      // this.antingChart.data(this.antingData);
      // this.antingChart.render();
    },
    // 获取各基地数据
    async getAllCase() {
      let resp = await reservationApi.getVehicleUsage();
      // console.log(resp.data.result);
      this.loadingPackList = false;
      this.loadingAllPosition = false;
      if (resp.data.success) {
        this.allPackData = resp.data.result;
      } else {
        this.$message.error(resp.data.message);
      }
    },

    // 安亭访客数据饼图--不用
    pieChart1() {
      // const antingData = [
      //   { type: '今日预约总人数', value: 1 },
      //   { type: '今日到访总人数', value: 0 },
      //   { type: '今日未审批人数', value: 0 },
      // ];

      const chart = new Chart({
        container: 'container',
        autoFit: true,
        height: 500,
      });
      this.antingChart = chart;
      chart.data(this.antingData);
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.8,
      });
      chart.tooltip(false);
      chart
        .interval()
        .adjust('stack')
        .position('value')
        .color('type',['#F0F2F5','#0ebc5b', '#FFA500', '#FF0000'])
        .shape('slice-shape');

      chart.render();
    },




  },
}
</script>
